<template>
  <div class="app-container">
    <!--整体布局-->
    <el-form :model="form" :rules="formRules" ref="form" label-width="120px">
      <el-row :gutter="0">
        <!-- 消息标题 -->
        <el-col :span="24">
          <el-form-item label="消息标题" style="text-align: left" prop="messageTitle">
            <el-input placeholder="请输入标题，该标题有可能作为'PUSH消息'推送给用户" v-model="form.messageTitle" class="filter-item" auto-complete="off" style="width: 60%"/>
          </el-form-item>
        </el-col>
        <!-- 发送对象 -->
        <el-col :span="24">
          <el-form-item label="选择发送对象" style="text-align: left">
            <el-select v-model="form.messageIsAssUser">
              <el-option v-for="item in pageData.messageIsAssUserList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 发布状态 -->
        <el-col :span="24">
          <el-row :gutter="0">
            <el-col :span="6">
              <el-form-item label="发布状态" style="text-align: left"  prop="messagePublicType">
                <el-radio-group v-model="form.messageSendType">
                  <el-radio :label="0">立即发送</el-radio>
                  <el-radio :label="1">定时发送</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="" style="text-align: left" prop="messageSendTime">
                <el-date-picker v-model="form.messageSendTime" type="datetime" placeholder="选择发送时间"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <!-- 推送PUSH -->
        <el-col :span="24">
          <el-form-item label="" style="text-align: left">
            <el-checkbox-group v-model="form.messageIsPushMessage">
              <el-checkbox :label="1">同时推送PUSH（仅推送“消息标题”内容）</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <!-- 编辑器 -->
        <el-col :span="24">
          <vue-ueditor-wrap v-model="form.messageContent" :config="pageData.editorConfig"></vue-ueditor-wrap>
        </el-col>
        <!-- 保存按钮 -->
        <el-col>
          <div style="margin-top: 20px">
            <el-button type="primary" plain @click.native.prevent="handleSaveButtonClick('form', 1)">暂存草稿</el-button>
            <el-button type="primary" @click.native.prevent="handleSaveButtonClick('form', 0)">发布</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  // 组件引入
  // 方法工具引入
  import { PermissionsToDetectFormUser } from '@/utils/PermissionsDetect';
  import { getPermission } from '@/utils/UserCookies';
  // 接口引入
  import { saveCmsMessageData } from "@/api/config";
  export default {
    name: "save",
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      return {
        pageData:{
          messageIsAssUserList: [
            {label: "全部用户", value: 0},
          ],
          editorConfig: {
            autoHeightEnabled: false,
            initialFrameHeight: 240,
            initialFrameWidth: "100%"
          }
        },// 页面配置数据
        form:{
          messageTitle: "",// 消息标题
          messageContent: "",// 消息内容
          messageStatus: 0,// 发送状态
          messageIsAssUser: 0,// 关联用户(0全部用户1关联用户)
          messageSendType: 0,// 发送状态(0立即发送1定时发送)
          messageSendTime: "",// 定时发送的时间
          messageIsPushMessage: 0,// 是否进行push推送（0不推送1推送）
          messageDraftStatus: 0,// 是否村委草稿(1存草稿)
        },// 页面表单
        formRules: {
          messageTitle: [{ required: true, validator:(rule, value, callback) => {
              if (value === ""){
                this.$message.warning("请输入消息标题");
                callback(new Error("请输入消息标题"));
              } else if (value.length > 30) {
                this.$message.warning("消息标题最大支持30个字符");
                callback(new Error("消息标题最大支持30个字符"));
              } else {
                callback();
              }
            },trigger: "blur" }],// 标题
          messageSendTime: [{ required: true, validator:(rule, value, callback) => {
              if (this.form.messageSendType === 1 && value === ""){
                this.$message.warning("定时发送模式下，请选择发送时间");
                callback(new Error("定时发送模式下，请选择发送时间"));
              } else if (value !== "" && value < new Date()) {
                this.$message.warning("请选择正确的时间");
                callback(new Error("请选择正确的时间"));
              } else {
                callback();
              }
            },trigger: "blur" }],// 标题
        },// 表单验证
        responseData: {},// 接口响应数据
      }
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods:{
      // 事件函数
      handlePageInit(){},// 页面初始化事件
      handleSaveButtonClick(formName, status){
        if (PermissionsToDetectFormUser(getPermission(), "540001")){
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.$confirm(this.form.messageIsPushMessage === 1 ? "此操作将保存当前数据，根据所选类型进行数据保存?" : "此操作将保存当前数据，不进行消息推送?", "提示", {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                if (status === 0 && this.form.messageSendType === 0 && this.form.messageSendTime === "") {
                  this.form.messageSendTime = new Date();
                }
                // 如果选择了发送时间则进行时间格式化
                if (this.form.messageSendTime !== ""){
                  let date = new Date(this.form.messageSendTime);
                  this.form.messageSendTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
                } else {
                  this.form.messageSendTime = "0000-00-00 00:00:00";
                }
                // 是否发送push字段处理
                this.form.messageIsPushMessage = this.form.messageIsPushMessage ? 1 : 0;
                // 如果当前数据是立即发布的状态，则推送状态设置为1
                if (this.form.messageSendType === 0 && status === 0){
                  this.form.messageStatus = 1;
                } else {
                  this.form.messageStatus = 0;
                }
                // 保存数据的草稿状态
                this.form.messageDraftStatus = status;
                this.saveCmsMessageData();
              }).catch((cancel) => {
                console.log(cancel);
                this.$message.info("已取消操作");
              });
            } else {
              return false;
            }
          })
        }  else {
          // 当前权限不足，不执行操作，给与相应提示
          this.$message.warning("您的权限不足，无法使用此功能，请联系管理员");
        }
      },// 保存按钮点击事件
      // 接口
      saveCmsMessageData(){
        saveCmsMessageData(this.form).then(response => {
          if (response.code === "200"){
            this.$message.success('消息保存成功');
            this.$jump.push({path: '/config/message'});
          } else {
            this.$message.warning(response.message);
          }
        }).catch(error =>{
          console.log(error);
        });
      },// 保存消息数据
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created: function () {
      let _this = this;
      setTimeout(function () {
        _this.handlePageInit();
      }, 800);
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
